<template>
	<view class="page" :id="'p'+aid">
		<view class="head-bg">
			<view class="session" :class="{'activity':scrollTop > 50}">
				<view class="list" v-for="(item,index) in data.smsFlashPromotionSessionVOS" :key="index" :class="index==pIndex?'action':''" @click="qhSeckill(index)">
					<text class="time">{{item.name}}</text>
					<text class="status">{{item.index==1?'已结束':item.index==2?'抢购中':'未开始'}}</text>
				</view>
			</view>
		</view>
		<view class="goods-list" v-for="(items,i) in data.smsFlashPromotionSessionVOS" :key="items.id">
			<view class="list"  v-for="(item,index) in items.smsFlashPromotionProductRelationVOS" :key="item.id" v-if="i==pIndex&&item.flashPromotionPrice!=null&&item.flashPromotionPrice!=''" @click="detail(items.index,item)">
				<view class="thumb">
					<image :src="item.pmsProduct.pic"></image>
				</view>
				<view class="item">
					<view class="title">
						<text class="one-omit">{{item.pmsProduct.subTitle}}</text>
					</view>
					<view class="price-data">
						<view class="price">
							<text>￥{{item.flashPromotionPrice}}</text>
							<text class="lineation ">￥{{item.pmsProduct.price}} </text>
						</view>
						<view class="data">
							
							<view v-if="items.index==1">
								<text>已结束</text>
							</view>
							<view v-if="items.index==2">
								<view class="btn" v-if="item.flashPromotionResidue!=0">
									<text>立即抢购</text>
								</view>
								<view v-else>
									<text>已抢完</text>
								</view>
							</view>
							
							<view v-if="items.index==3">
								<text>未开始</text>
							</view>
							<view class="schedule">
								<view class="num">{{items.index==3?'未开始':'剩余'}}</view>	
							
								<u-line-progress class="bar" :striped="true" :percent="item.flashPromotionResidue/item.flashPromotionCount*100|int" :striped-active="true" height="12" active-color="rgba(233, 59, 61, 0.5)"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-list" v-if="items.smsFlashPromotionProductRelationVOS.length==0&&i==pIndex">
				<u-empty text="暂无活动" mode="list"></u-empty>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import SmsFlashPromotionSessionController from '../api/SmsFlashPromotionSessionController.js'
	import {formatDate} from '../utils/date.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				data:{
					
				},
				pIndex:0,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		props:{
			aid:{
				type:Number,
				default:0,
			}
		},
		async created() {
			await SmsFlashPromotionSessionController.list(this.aid).then(res=>{
				if(res.data.code==200){
					res.data.data.smsFlashPromotionSessionVOS.forEach(e=>{
						
						e.index=this.formatDates(e.startTime,e.endTime)
					})
					this.data=res.data.data
				}else if(res.data.code == 401){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			})
			this.$nextTick(function(){
				let vos=this.data.smsFlashPromotionSessionVOS;
				let index=null;
				for(let i=0;i<vos.length;i++){
					if(vos[i].index==2){
						index=i;
					}
				}
				
				if(index==null){
					for(let i=0;i<vos.length;i++){
						if(vos[i].index==3){
							index=i;
							break;
						}
					}
				}
				console.log(index)
				this.qhSeckill(index)
			})
			
		},
		filters:{
			GetPercent(num, total) {
			    /// <summary>
			    /// 求百分比
			    /// </summary>
			    /// <param name="num">当前数</param>
			    /// <param name="total">总数</param>
			    num = parseFloat(num);
			    total = parseFloat(total);
			    if (isNaN(num) || isNaN(total)) {
			        return "-";
			    }
			    return total <= 0 ? 0 : (Math.round(num / total * 10000) / 100.00);
			},
			int(sun){
				return parseInt(sun)
			}
		},
		methods: {
			detail(index,item){
				if(index==1){
					uni.navigateTo({
						url:'/pages/goodsDetails/goodsDetails?id='+item.pmsProduct.id
					})
				}else{
					uni.navigateTo({
						url:'/pages/seckill/seckillGoods?id='+item.id
					})
				}
			},
			formatDates(startTime,endTime){
				let date=new Date();
				let time=new Date("1970/01/01 "+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()).getTime();
				if(new Date(startTime).getTime()>time){
					return 3;
				}else if(new Date(startTime).getTime()<=time&&new Date(endTime).getTime()>=time){
					return 2;
				}else if(new Date(endTime).getTime()<time){
					return 1;
				}
				
			},
			countHigh(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#p'+this.aid).boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
				}).exec();
			},
			qhSeckill(index){
				let length=this.data.smsFlashPromotionSessionVOS[index].smsFlashPromotionProductRelationVOS.length;
				if(length>4){
	
					this.$emit('countHigh',length*120)
				}else{
					uni.getSystemInfo({
						success:res=>{
							this.$emit('countHigh',res.windowHeight-uni.upx2px(100))
						}
					})
				}
				this.pIndex=index;
			},
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 商品点击
			 */
			onGoods() {
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails?type=1'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.head-back {
		position: relative;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100rpx;
		/* #ifdef APP-PLUS */
		height: calc(120rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef MP */
		height: 150rpx;
		padding-top: var(--status-bar-height);
		/* #endif */
		background: linear-gradient(to right, #FF0000, #fc603a);

		.back {
			position: absolute;
			left: 0;
			top: 0;
			/* #ifdef APP-PLUS */
			top: var(--status-bar-height);
			/* #endif */
			/* #ifdef MP */
			top: var(--status-bar-height);
			/* #endif */
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;

			text {
				display: flex;
				width: 20rpx;
				height: 20rpx;
				border-left: 2rpx solid #FFFFFF;
				border-bottom: 2rpx solid #FFFFFF;
				transform: rotate(45deg);
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;

			image {
				width: 200rpx;
				height: 50rpx;
			}
		}
	}

	.head-bg {
		width: 100%;
		height: 140rpx;
		background: linear-gradient(to right, #FF0000, #fc603a);
		border-radius: 0 0 20% 20%;

		.session {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 20%;
				height: 100%;

				.time {
					font-size: 32rpx;
					font-weight: bold;
					color: #ff9aa9;
				}

				.status {
					font-size: 24rpx;
					color: #ff9aa9;
				}
			}

			.action {
				.time {
					color: #FFFFFF;
				}

				.status {
					color: #FFFFFF
				}
			}
		}

		.activity {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: #FFFFFF;

			.list {
				.time {
					font-size: 32rpx;
					font-weight: bold;
					color: #222222;
				}

				.status {
					font-size: 24rpx;
					color: #222222;
				}
			}

			.action {
				.time {
					color: #FF0000;
				}

				.status {
					color: #FF0000;
				}
			}
		}
	}

	.goods-list {
		padding: 0 4%;
		margin: 20rpx auto;

		.list {
			display: flex;
			align-items: center;
			padding: 0 4%;
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.thumb {
				display: flex;
				align-items: center;
				width: 30%;
				height: 100%;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.item {
				width: 70%;
				height: 100%;

				.title {
					display: flex;
					align-items: center;
					width: 100%;
					height: 95rpx;

					.one-omit {
						font-size: 26rpx;
						color: #222222;
						overflow: hidden;
						word-break: break-all;
						/* break-all(允许在单词内换行。) */
						text-overflow: ellipsis;
						/* 超出部分省略号 */
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 2;
						/** 显示的行数 **/
					}
				}

				.price-data {
					display: flex;
					align-items: center;
					width: 100%;
	

					.price {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 40%;
						height: 100%;

						text {
							color: #fe3b0f;
							font-size: 32rpx;
							font-weight: bold;
						}

						.lineation {
							font-size: 24rpx;
							color: #959595;
							font-weight: normal;
							text-decoration: line-through;
						}
					}

					.data {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-end;
						width: 60%;
						height: 100%;

						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 160rpx;
							height: 60rpx;
							background: linear-gradient(to right, #fe3b0f, #fc603a);
							border-radius: 70rpx;
							font-size: 26rpx;
							color: #FFFFFF;
						}

						.schedule {
							display: flex;
							align-items: center;
							width: 100%;
							height: 40rpx;

							.num {
								font-size: 24rpx;
								color: #959595;
							}

							.bar {
								width: 160rpx;
								margin-left: 10rpx;

								text {
									display: flex;
									width: 50%;
									height: 100%;
									background-color: rgba(233, 59, 61, 0.5);
									animation: bar 1s linear;
								}

								@keyframes bar {
									0% {
										width: 0;
									}

									100% {
										width: 50%;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
